<template>
  <div class="home">
    <div class="swiper-container">
      <div class="swiper-wrapper">
          <div
            v-for="banner in banners"
            :key="`banner-${banner.id}`"
            class="swiper-slide"
          ><img :src="banner.imageUrl" :alt="banner.title"></div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'Home',
  data () {
    return {
      banners: ''
    }
  },
  created () {
    this.$http.getCatecory(1).then(resp => {
      this.banners = resp.banners
      // nextTick()  当数据改变以后要等到DOM元素渲染完成后才写轮播图
      this.$nextTick().then(() => {
        this.initSwiper()
      })
    })
  },
  methods: {
    initSwiper () {
      // eslint-disable-next-line
      new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar'
        },
        autoplay: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-container{
  width: 100%;
  padding-top: 378 / 1008 * 100%;
  position: relative;
  .swiper-wrapper{
    position: absolute;
    left: 0;
    top: 0;
  }
  img{
    width: 100%;
  }
}
</style>
